<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入nodeModules文件中内容</title>
</head>
<body>
<div id="app">
    <select-options></select-options>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/iview/dist/iview.js"></script>
<link rel="stylesheet" href="../node_modules/iview/dist/styles/iview.css">
<script src="./components/selectComponent.js"></script>
<script>
	// 注册
	Vue.component('my-component', {
		template: '<div>A custom component!</div>'
	})
	Vue.component('selectOptions', {
		template: `<Select v-model="model1" style="width:200px"  @on-change="changevalue">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>`,
		data () {
			return {
				cityList: [
					{
						value: 'New York',
						label: 'New York'
					},
					{
						value: 'London',
						label: 'London'
					},
					{
						value: 'Sydney',
						label: 'Sydney'
					},
					{
						value: 'Ottawa',
						label: 'Ottawa'
					},
					{
						value: 'Paris',
						label: 'Paris'
					},
					{
						value: 'Canberra',
						label: 'Canberra'
					}
				],
				model1: ''
			}
		},
		methods: {
			changevalue:function (value) {
				console.log(value)
			}
		}
	})
	new Vue({
		el: '#app',
		data: {
			visible: false
		},
		methods: {
			show: function () {
				this.visible = true
			}
		},
	})

</script>

</body>
</html>